<template>
  <div class="all">
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="">
        <span class="sides">返回</span>
      </div>
      <div class="div">
        <span>服药建议</span>
      </div>
      <div class="div" @click="newBuild()">
        <img src="../../../assets/蓝添加.png" style="width: 13px;height: 13px" alt="">
        <span class="sides">新增建议</span>
      </div>
    </header>
    <div class="content">
      <div class="title">
        <a class="hengGang"></a>
        <span>个人基本信息</span>
      </div>
      <div class="personInfo">
        <ul>
          <!--          <li class="personHeader">接受评估人基本信息</li>-->
          <li>
            <p>
              <img class="photo" v-if="peopleList.PHOTO === null || peopleList.PHOTO === '' || peopleList.PHOTO === undefined"
                   src="../../../assets/photo.png" alt="">
              <img v-else :src="peopleList.PHOTO" alt="">
              <a style="font-weight: bold">{{peopleList.name}}</a>
              <a v-show="Number(peopleList.SEX) === 1">男</a>
              <a v-show="Number(peopleList.SEX)=== 2">女</a>
              <a v-show="peopleList.age!==null && peopleList.age > 0">{{peopleList.age}}岁</a>
            </p>
            <p>
              <span class="color">联系电话：
                <span>{{peopleList.phone}}</span>
              </span>
            </p>
            <p>
              <span class="color">初步诊断：
                <span v-if="peopleList.DIAGNOSE === '' || peopleList.DIAGNOSE === null || peopleList.DIAGNOSE === undefined">
                  未填写
                </span>
                <span v-else>{{peopleList.DIAGNOSE}}</span>
              </span>
            </p>
            <p>
              <span class="color">联系地址：
                <span>{{peopleList.zuizhongAddress}}</span>
              </span>
            </p>
          </li>
        </ul>
      </div>
      <div class="title">
        <a class="hengGang"></a>
        <span>建议信息</span>
      </div>
      <div class="list">
        <van-empty
          style="width: 100%;height: 100%"
          v-if="chuFangList.length <= 0"
          class="custom-image"
          description="暂无数据"
          :image="require('../../../assets/暂无数据.png')"
        >
        </van-empty>
        <div class="listDiv" v-for="(item, index) in chuFangList" @click="clickLook(item)" :key="index">
          <div class="div_left">
            <a class="biao">建</a>
          </div>
          <div class="div_right">
            <ul >
              <li>
                <span>建议日期：{{item.jianli_time}}</span>
              </li>
              <li style="margin: 5px auto"><span>开立人员：{{item.kailiPeople}}<a v-if="item.dict_name !== null">（{{item.dict_name}}）</a></span></li>
              <li>
                <span  style="margin-right: 65px;">西药：{{item.xiyao}}</span>
                <span >中成药: {{item.zhongyao}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChuFangList',
  data () {
    return {
      ACCEPT_USER_ID: this.$route.query.userid,
      peopleList: [],
      chuFangList: []
    }
  },
  mounted () {
    // 获取档案人信息
    this.getPerson()
    // 获取列表信息
    this.getfindAllprescription()
  },
  methods: {
    clickLook (item) {
      this.$router.push({path: '/chufangLook', query: {id: item.id}})
    },
    // 获取列表所有信息
    getfindAllprescription () {
      this.$http.findAllprescription({data_user_id: this.ACCEPT_USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.chuFangList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    },
    newBuild () {
      this.$router.push({path: '/buildJianyi',
        query: {
          // 操作人id
          op_user_id: this.$route.query.myUserid,
          // 档案人id
          data_user_id: this.$route.query.userid
        }
      })
    },
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.ACCEPT_USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .all{
    background: #FAF9FE;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    font-family: "PingFang SC";
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    border-bottom: 1px solid #E5E5E5;
    background: white;
  }
  header .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  header .div:nth-child(1)  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
    margin-left: 15px;
  }
  header .div:nth-child(2){
    justify-content: center;
  }
  header .div:nth-child(3) {
    justify-content: flex-end;
    margin-right: 15px;
  }
  header .div:nth-child(3) img{
    width: 15px;
    height: 15px;
    margin-right: 3px;
  }
  .sides{
    color: #1DA4F2;
  }
  .personInfo {
    width: 92%;
    color: #fff;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
  }
  .personInfo ul{
    width: 100%;
    height: 100%;
    /*padding: 5px 0;*/
    box-sizing: border-box;
    font-family: "PingFang SC";
  }
  .color{
    color: #fff;
    display: flex;
  }
  .personInfo img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  .personHeader{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: #1DA4F2;
    color: #FFFFFF;
    font-size: 15px;
  }
  .personInfo ul li{
    padding: 0 10px;
    box-sizing: border-box;
  }
  .personInfo p{
    width: 100%;
    padding: 5px 0 0 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .personInfo p:last-child{
    margin-bottom: 5px;
  }
  .personInfo p:first-child{
    margin-top: 3px;
  }
  .personInfo p a{
    margin-left: 10px;
    font-size: 15px;
  }
  .list .listDiv{
    width: 92%;
    background: white;
    border-radius: 10px;
    margin: 8px auto;
    padding: 10px 0px;
    box-sizing: border-box;
    font-size: 13px;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
    display: flex;
  }
  .div_left{
    width: 10%;
  }
  .div_right{
    width: 90%;
  }
  .list ul li{
    display: flex;
  }
  .biao{
    width: 18px;
    height: 18px;
    background: #1DA4F2;
    font-size: 11px;
    color: white;
    box-sizing: border-box;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
  }
  /deep/ .van-empty__image {
    width: 160px;
    height: 100px;
  }

  /deep/ .van-empty__image img {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty{
    width: 100%;
    height: 60vh !important;
  }
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
</style>
